<template>
	<view class="apply-container">
		<uni-forms ref="applyForm" :modelValue="formData" :rules="rules">
			<!-- 申请人 -->
			<uni-forms-item label="申请人" name="username">
				<uni-easyinput
					v-model="formData.username"
					:disabled="true"
					placeholder="请输入申请人姓名"
				/>
			</uni-forms-item>
			
			<!-- 出车时间 -->
			<uni-forms-item label="出车时间" name="usageTime">
				<uni-datetime-picker
					v-model="formData.usageTime"
					type="datetime"
					:clear-icon="false"
					@change="handleStartTimeChange"
				/>
			</uni-forms-item>
			
			<!-- 归还时间 -->
			<uni-forms-item label="归还时间" name="returnTime">
				<uni-datetime-picker
					v-model="formData.returnTime"
					type="datetime"
					:clear-icon="false"
					:start="formData.usageTime"
				/>
			</uni-forms-item>
			
			<!-- 申请理由 -->
			<uni-forms-item label="申请理由" name="tripReason">
				<uni-easyinput
					v-model="formData.tripReason"
					type="textarea"
					placeholder="请输入申请理由"
					:maxlength="200"
				/>
			</uni-forms-item>
		</uni-forms>
		
		<!-- 提交按钮 -->
		<view class="submit-btn">
			<button type="primary" @click="submitApply">提交申请</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { createApply } from '@/api/apply'

const applyForm = ref(null)

// 表单数据
const formData = ref({
	userId:'',
	username: '',
	usageTime: '',
	returnTime: '',
	tripReason: ''
})

// 初始化用户名
onMounted(() => {
	const username = uni.getStorageSync('username')
	const userId=uni.getStorageSync('userId')
	if (username) {
		formData.value.username = username
	}
	if(userId){
		formData.value.userId = userId
	}

})

// 表单验证规则
const rules = {
	username: {
		rules: [{
			required: true,
			errorMessage: '请输入申请人姓名'
		}]
	},
	usageTime: {
		rules: [{
			required: true,
			errorMessage: '请选择出车时间'
		}]
	},
	returnTime: {
		rules: [{
			required: true,
			errorMessage: '请选择归还时间'
		}, {
			validateFunction: function(rule, value, data, callback) {
				if (value && data.usageTime && value <= data.usageTime) {
					callback('归还时间必须大于出车时间')
				}
				return true
			}
		}]
	},
	tripReason: {
		rules: [{
			required: true,
			errorMessage: '请输入申请理由'
		}, {
			minLength: 10,
			errorMessage: '申请理由不能少于10个字'
		}]
	}
}

// 出车时间改变时，清空归还时间
const handleStartTimeChange = () => {
	formData.value.returnTime = ''
}

// 提交申请
const submitApply = async () => {
	try {
		// 表单验证
		const valid = await applyForm.value.validate()
		if (!valid) return
		
		// 显示加载提示
		uni.showLoading({
			title: '提交中...'
		})
		const postData={
			usageTime:formData.value.usageTime,
			userId:formData.value.userId,
			tripReason:formData.value.tripReason,
			returnTime:formData.value.returnTime
		}
		// 调用提交接口
		const res = await createApply(postData)
		
		uni.hideLoading()
		
		if (res.code === 200) {
			uni.showToast({
				title: '提交成功',
				icon: 'success'
			})
			
			// 返回上一页
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		} else {
			uni.showToast({
				title: res.message || '提交失败',
				icon: 'none'
			})
		}
	} catch (error) {
		uni.hideLoading()
		uni.showToast({
			title: error.message || '提交失败',
			icon: 'none'
		})
	}
}
</script>

<style>
.apply-container {
	padding: 20rpx;
	background-color: #f5f5f5;
}

:deep(.uni-forms) {
	background-color: #fff;
	padding: 20rpx;
	border-radius: 10rpx;
}

:deep(.uni-forms-item) {
	padding: 10rpx 0;
}

:deep(.uni-easyinput__content) {
	background-color: #f8f8f8;
	border-radius: 4rpx;
}

:deep(.uni-datetime-picker) {
	width: 100%;
}

:deep(.uni-datetime-picker-timebox) {
	border: none !important;
	padding: 0 !important;
}

.submit-btn {
	margin-top: 30rpx;
	padding: 20rpx;
}

.submit-btn button {
	width: 100%;
}
</style>
